<template>
  <CardHead title="成员盘点">
    <div class="w-full rounded-lg px-3">
      <div class="w-full bg-white rounded-lg py-3">
        <CardLoading v-if="loading" />
        <ScatterChart
          v-else
          :data="cp_dataList"
          :pass-value-y="taskStandardScore"
          :pass-value-x="abilityStandardScore"
        />
      </div>
    </div>
  </CardHead>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, Ref, ComputedRef, watch } from "vue";
import CardHead from "@/views/myXmate/myTeam/components/cardHead.vue";
import ScatterChart from "@/components/charts/scatterChart.vue";
import CardLoading from "@/views/myXmate/myTeam/components/cardLoading.vue";
import {
  getTeamMemberInventoryAPI,
  TeamMemberInventoryParams,
  TeamMemberInventoryModel,
} from "@/services/myXmate";
import { useMyXmateStore } from "@/store";
import { generateSimilarColor } from "@/utils/colorTool";
import { getUserInfo } from "@/utils/auth";
import { formatCompletionTime, ParameterDateType } from "@/utils/timeTool";

const store = useMyXmateStore();

onMounted(() => {
  getData();
});

const orgId = computed(() => getUserInfo().orgId);
const currentDeptId = computed(() => store.noticeBoardPublicParam.currentDept?.id);
const reportType = computed(() => store.noticeBoardPublicParam.reportType);
const startTime = computed(() => store.noticeBoardPublicParam.startDate);
const endTime = computed(() => store.noticeBoardPublicParam.endDate);
const taskStandardScore = computed(() => store.noticeBoardPublicParam.taskStandardScore);
const abilityStandardScore = computed(
  () => store.noticeBoardPublicParam.abilityStandardScore
);

watch([currentDeptId, reportType], () => getData());

function makeParams(): TeamMemberInventoryParams {
  return {
    orgId: orgId.value,
    deptId: currentDeptId.value,
    params: {
      reportType: reportType.value,
      startTime: formatCompletionTime(startTime.value, ParameterDateType.START_DATE),
      endTime: formatCompletionTime(endTime.value, ParameterDateType.ENE_DATE),
    },
  };
}

const colors = [
  "#1ABDFF",
  "#04CCA4",
  "#F06060",
  "#FA8C16",
  "#6D1BFF",
  "#FF6B6B",
  "#4ECDC4",
  "#45B7D1",
  "#96CEB4",
  "#FFEAA7",
  "#DDA0DD",
  "#98D8C8",
  "#F7DC6F",
  "#BB8FCE",
  "#85C1E9",
  "#F8C471",
  "#82E0AA",
  "#F1948A",
  "#85C1E9",
  "#D7BDE2",
];
const getColorByIndex = (index: number) => {
  if (index < colors.length) {
    return colors[index];
  }
  return generateSimilarColor(colors[Math.floor(Math.random() * colors.length)]);
};

const cp_dataList = computed(() => {
  const deptColorMap = new Map();
  dataList.value.forEach((item, index) => {
    const { deptName, deptId, taskCompleteRatio, abilityScore, name } = item;
    const deptInfo = deptColorMap.get(deptId);
    if (!deptInfo) {
      deptColorMap.set(deptId, {
        name: deptName,
        legendName: deptName.split(">").pop(),
        color: getColorByIndex(index),
        dataList: [
          {
            name,
            value: [abilityScore, taskCompleteRatio],
          },
        ],
      });
    } else {
      deptInfo.dataList.push({
        name,
        value: [abilityScore, taskCompleteRatio],
      });
    }
  });
  return Array.from(deptColorMap.values());
});

const loading = ref(false);
const dataList: Ref<TeamMemberInventoryModel[]> = ref([]);
async function getData() {
  loading.value = true;
  const data = await getTeamMemberInventoryAPI(makeParams());
  loading.value = false;
  dataList.value = data.datas;
}
</script>
